<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="example">
        <div v-bind:style="[baseStyle,fontStyle,styleRadius]">
            <h4>枫桥夜泊</h4>
            <p>月落乌啼霜满天，<br>江枫渔火对愁眠。<br>姑苏城外寒山寺，<br>夜半钟声到客船。</p>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            width: 400,
            margin: '10px auto',
            padding: 30,
            bgcolor: 'lightbule',
            family: '华文楷体',
            fontSize: 36,
            color: 'green',
            align: 'center',
            border: '1px solid #CCCCCC',
            boxShadow: '3px 3px 6px #999999',
            mode: 'vertical-rl'
        },
        computed: {
            baseStyle: function () {
                return {
                    width: this.width + 'px',
                    margin: this.margin,
                    padding: this.padding + 'px',
                    'backgroud-color': this.bgcolor
                }
            },
            fontStyle: function () {
                return {
                    'font-family': this.family,
                    fontSize: this.fontSize + 'px',
                    color: this.color,
                    'text-align': this.align
                }
            },
            styleRadius: function () {
                return {
                    border: this.border,
                    'box-shadow': this.boxShadow,
                    'writing-mode': this.mode
                }
            }

        }
    })
</script>

</html>